<template>
  <div class="app-container">
    <my-tag title="设计师认证记录" :showSortImg="false"></my-tag>
    <el-table v-loading="loading" :data="designerList">
      <el-table-column label="ID" align="center" :show-overflow-tooltip="true" prop="designerId" />
      <el-table-column label="设计师昵称" align="center" :show-overflow-tooltip="true" prop="designerName" />
      <el-table-column label="授权手机号" align="center" :show-overflow-tooltip="true" prop="tel" />
      <el-table-column label="头像" align="center" prop="url">
        <template #default="scope">
          <ImagePreview :width="60" :height="60" :src="scope.row.url" :preview-src-list="[scope.row.url]" />
        </template>
      </el-table-column>
      <el-table-column label="机构" align="center" :show-overflow-tooltip="true" prop="company" />
      <el-table-column label="认证状态" :show-overflow-tooltip="true" align="center" prop="designerStatus">
        <template #default="scope">
          <dict-tag :options="designer_status" :value="scope.row.designerStatus" />
        </template>
      </el-table-column>
      <el-table-column label="修改时间" align="center" :show-overflow-tooltip="true" prop="updateTime" />
      <el-table-column label="备注" :show-overflow-tooltip="true" align="center" prop="remark" />
    </el-table>
    <pagination style="margin-bottom:60px;margin-top:0px" v-show="totalDesigner > 0" :total="totalDesigner"
      v-model:page="queryParamsDesigner.pageNum" v-model:limit="queryParamsDesigner.pageSize"
      @pagination="getDesignerList" />
    <my-tag title="机构认证记录" :showSortImg="false"></my-tag>
    <el-table v-loading="loading" :data="AgencyList">
      <el-table-column label="ID" :show-overflow-tooltip="true" align="center" prop="organizationId" />
      <el-table-column label="机构名称" :show-overflow-tooltip="true" align="center" prop="organizationName">
      </el-table-column>
      <el-table-column label="机构地址" :show-overflow-tooltip="true" align="center" prop="address"> </el-table-column>
      <el-table-column label="授权手机号" :show-overflow-tooltip="true" align="center" prop="contactInformation">
      </el-table-column>
      <el-table-column label="头像" width="90" align="center" prop="avatarUrl">
        <template #default="scope">
          <image-preview :width="60" :height="60" :src="scope.row.avatarUrl"
            :preview-src-list="[scope.row.avatarUrl]"></image-preview>
        </template>
      </el-table-column>
      <el-table-column label="形象照" width="90" align="center" prop="profilePictureUrl">
        <template #default="scope">
          <image-preview :width="60" :height="60" :src="scope.row.profilePictureUrl"
            :preview-src-list="[scope.row.profilePictureUrl]"></image-preview>
        </template>
      </el-table-column>
      <el-table-column label="修改时间" align="center" :show-overflow-tooltip="true" prop="updateTime" />
      <el-table-column label="机构状态" width="80" align="center" prop="organizationStatus">
        <template #default="scope">
          <dict-tag :options="organization_status" :value="scope.row.organizationStatus" />
        </template>
      </el-table-column>
      <el-table-column label="备注" :show-overflow-tooltip="true" align="center" prop="remark"> </el-table-column>
    </el-table>
    <pagination style="margin-bottom:60px;margin-top:0px" v-show="totalAgency > 0" :total="totalAgency"
      v-model:page="queryParamsAgency.pageNum" v-model:limit="queryParamsAgency.pageSize" @pagination="getAgencyList" />
    <my-tag title="材料商认证记录" :showSortImg="false"></my-tag>
    <el-table v-loading="loading" :data="materialSupplierList">
      <el-table-column label="ID" :show-overflow-tooltip="true" align="center" prop="materialSupplierId" />
      <el-table-column label="材料商名称" :show-overflow-tooltip="true" align="center"
        prop="materialSupplierName"></el-table-column>
      <el-table-column label="地址" :show-overflow-tooltip="true" align="center" prop="address"></el-table-column>
      <el-table-column label="授权手机号" :show-overflow-tooltip="true" align="center"
        prop="contactInformation"></el-table-column>
      <el-table-column label="头像" align="center" prop="avatarUrl">
        <template #default="scope">
          <image-preview :width="60" :height="60" :src="scope.row.avatarUrl"
            :preview-src-list="[scope.row.avatarUrl]"></image-preview>
        </template>
      </el-table-column>
      <el-table-column label="形象照" align="center" prop="profilePictureUrl">
        <template #default="scope">
          <image-preview :width="60" :height="60" :src="scope.row.profilePictureUrl"
            :preview-src-list="[scope.row.profilePictureUrl]"></image-preview>
        </template>
      </el-table-column>
      <el-table-column label="材料商状态" align="center" prop="materialSupplierStatus">
        <template #default="scope">
          <dict-tag :options="material_supplier_status" :value="scope.row.materialSupplierStatus" />
        </template>
      </el-table-column>
      <el-table-column label="修改时间" align="center" :show-overflow-tooltip="true" prop="updateTime" />
      <el-table-column label="备注" :show-overflow-tooltip="true" align="center" prop="remark"></el-table-column>
    </el-table>
    <pagination style="margin-bottom:60px;margin-top:0px" v-show="totalMaterial > 0" :total="totalMaterial"
      v-model:page="queryParamsMaterial.pageNum" v-model:limit="queryParamsMaterial.pageSize"
      @pagination="getMaterialRecordList" />
  </div>
</template>
  
<script setup>
import { listAuthentication, getAgencyRecord, getMaterialRecord } from "@/api/decor/authentication";
import { getImgUrl } from "@/api/decor/designer";
import useUserStore from '@/store/modules/user'
const { proxy } = getCurrentInstance();
const { designer_status } = proxy.useDict('designer_status');
const { organization_status } = proxy.useDict('organization_status');
const { material_supplier_status } = proxy.useDict('material_supplier_status');
const router = useRouter();
const currentRole = ref('')
// 表格数据
const designerList = ref([]);
const AgencyList = ref([]);
const materialSupplierList = ref([]);
// 遮罩层
const loading = ref(true);
// 总条数
const totalDesigner = ref(0);
const totalMaterial = ref(0);
const totalAgency = ref(0);

const data = reactive({
  queryParamsDesigner: {
    pageNum: 1,
    pageSize: 10,
    // orderByColumn: 'designerId',
    // isAsc: 'desc'
  },
  queryParamsAgency: {
    pageNum: 1,
    pageSize: 10,
    // orderByColumn: 'organizationId',
    // isAsc: 'desc'
  },
  queryParamsMaterial: {
    pageNum: 1,
    pageSize: 10,
    // orderByColumn: 'materialSupplierId',
    // isAsc: 'desc'
  }
});

const { queryParamsDesigner, queryParamsAgency, queryParamsMaterial } = toRefs(data);
// 表格数据
// 设计师认证记录
function getDesignerList() {
  loading.value = true;
  currentRole.value = useUserStore().roles
  listAuthentication(queryParamsDesigner.value).then(response => {
    let imgUrlPromises = [];
    let data = response.rows.map((v) => {
      return { ...v, url: '' }
    })
    data.forEach((v) => {
      if (v.avatarId) {
        let promise = getImgUrl(v.avatarId).then((res) => {
          v.url = res.data[0].url;
        });
        imgUrlPromises.push(promise);
      }
    })
    Promise.all(imgUrlPromises).then(() => {
      designerList.value = data;
      totalDesigner.value = response.total;
      loading.value = false;
    });
  });
  loading.value = false
}
const getAgencyList = () => {
  loading.value = true;
  currentRole.value = useUserStore().roles
  // 机构认证记录
  getAgencyRecord(queryParamsAgency.value).then(response => {
    let imgUrlPromises = [];
    let data = response.rows.map((v) => {
      return { ...v, avatarUrl: '', profilePictureUrl: '' }
    })
    data.forEach((v) => {
      if (v.avatar) {
        let promise = getImgUrl(v.avatar).then((res) => {
          v.avatarUrl = res.data[0].url;
        });
        imgUrlPromises.push(promise);
      }
      if (v.profilePicture) {
        let profilePicture = getImgUrl(v.profilePicture).then((res) => {
          v.profilePictureUrl = res.data[0].url;
        });
        imgUrlPromises.push(profilePicture);
      }
    })
    Promise.all(imgUrlPromises).then(() => {
      AgencyList.value = data;
      totalAgency.value = response.total;
      loading.value = false;
    });
  });
  loading.value = false
}
const getMaterialRecordList = () => {
  loading.value = true;
  currentRole.value = useUserStore().roles
  getMaterialRecord(queryParamsMaterial.value).then(response => {
    let imgUrlPromises = [];
    let data = response.rows.map((v) => {
      return { ...v, avatarUrl: '', profilePictureUrl: '' }
    })
    data.forEach((v) => {
      if (v.avatar) {
        let promise = getImgUrl(v.avatar).then((res) => {
          v.avatarUrl = res.data[0].url;
        });
        imgUrlPromises.push(promise);
      }
      if (v.profilePicture) {
        let profilePicture = getImgUrl(v.profilePicture).then((res) => {
          v.profilePictureUrl = res.data[0].url;
        });
        imgUrlPromises.push(profilePicture);
      }
    })
    Promise.all(imgUrlPromises).then(() => {
      materialSupplierList.value = data;
      totalMaterial.value = response.total;
      loading.value = false;
    });
  });
  loading.value = false
}

getDesignerList();
getAgencyList();
getMaterialRecordList()
</script>
<style lang="scss" scoped>
::v-deep(.pagination-container .el-pagination) {
  position: absolute;
  right: 38px;
}
</style>
  